<template>
  <div class="page_rela_container" >
		<div class="scroll_auto flex_cell">
    <el-form ref="formEl" :model="formValue" label-width="120px" class="common-form-panel-div">

      <ex_header_spiler :title="$tt('客户价卡基础信息')" style="margin-top: 10px;"></ex_header_spiler>

      <el-row style="margin-top: 20px;">
        <el-col>
          <!--产品名称  -->
          <el-form-item :label="$tt('label_pms_product_name')">
            <el-input v-model="formValue.productName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <!-- 产品编码 -->
          <el-form-item :label="$tt('label_pms_product_code')">
            <el-input v-model="formValue.productCode" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col>
          <!-- 版本名称 -->
          <el-form-item :label="$tt('版本名称')">
            <el-input v-model="formValue.versionName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 费用配置 -->
      <ex_header_spiler :title="$tt('客户价卡配置')" style="margin-top: 10px;"></ex_header_spiler>
      <!-- ref="transportPriceEl" -->

      <div style="position: relative;">

        <el-button v-show="editType"  @click="adTabConfig" style="position: absolute;  top: 0px; right: 20px; z-index: 999; " icon="el-icon-plus">添加配置</el-button>

        <ex-button-delete
            style="position: absolute;  top: 60px; left: 420px; z-index: 999; "
            v-if=" formValue.versions && formValue.versions.length>0 && activeName != getTabId(formValue.versions[0])"
            message="确定删除当前产品价卡配置？"
            label="删除当前配置"
            byAction
            :delAction="()=>{
            formValue.versions = formValue.versions.filter(tab => getTabId(tab) != activeName);
            activeName = getTabId(formValue.versions[0]);
          }"
        ></ex-button-delete>

        <el-tabs v-model="activeName" type="card" >
          <el-tab-pane v-for="(item,index) in formValue.versions"
                       :label="getTabTitle(item)"
                       :name=" getTabId(item) "
                       :key="item.id">
            <insurance_price_cfg ref="insurancePriceCfg"
                                 :priceVersionId="item.id"
                                 :versionStartTimeDisabled="index === 0"
                                 :inputForm="item">
            </insurance_price_cfg>
          </el-tab-pane>
        </el-tabs>

      </div>

    </el-form>
  </div>


    <div v-show="editType" class="page_rela_bottom_area">
      <el-button type="primary" @click="submitForm()">{{ $tt('label_save') }}</el-button>
      <el-button @click="goback()">{{ $tt('label_cancel') }}</el-button>
    </div>

  </div>
</template>

<script>
import router_params from "@/mixin/router_params";
import insurance_price_cfg from "@/component/pms/insurance_price_cfg.vue";
import TransportPriceCfg from "@/component/pms/transport_price_cfg.vue";

export default {
  name: "insurance_product_edit_customer",
  components: {TransportPriceCfg, insurance_price_cfg},
  mixins: [router_params],
  data() {
    return {


      "operateType": "",
      "activeName": "",

      "formValue": {
        "checkedSupplyProductIds": [],
        "disableSkuCategoryIds": [],
        "refCompany": []
      },

      editType:true


    }
  },
  created() {
    let _this = this

    let versionId = this.$route.query.vid;
    let productId = this.$route.query.pid;

    if (this.$route.query.editType) {
      if ('false' === this.$route.query.editType) {
        this.editType = false;
      }
    }


    if (versionId && productId) {

      _this.$ajax({
        url: '/fms-api/product/PmsInsuranceCustomerPriceRpc/detail.json',
        data:{
          "versionId": versionId,
          "productId": productId
        },
        success: (res) => {

          _this.formValue = res.data

          if(_this.formValue.type == 'add'){
            this.$tag.tagModifyLabel('客户价卡新增')
          }
          else{
            if (this.editable) {
              this.$tag.tagModifyLabel('客户价卡编辑')
            }
            else {
              this.$tag.tagModifyLabel('客户价卡详情')
            }
          }

          _this.formValue.versions.forEach(r=>{
            r.labelTitle = _this.getTabTitle(r)
          })

          _this.formValue.versions.forEach(r=>{
            if(!r.id){
              r.id = 'id_' + (Math.random() + '').replace('.', '')
            }

            r.warehouses = _this.formValue.warehouses
          })

          _this.activeName = _this.getTabId( _this.formValue.versions[0] )

        }
      });
    }
  },
  methods: {
    adTabConfig(){

      let sample = JSON.parse(JSON.stringify(this.formValue.versions[this.formValue.versions.length -1] ))

      let lastTime = sample.versionEndTime

      sample.versionStartTime = lastTime
      sample.versionStartTime = parseInt(lastTime) + 86400000
      sample.versionEndTime = parseInt(lastTime)+ 31536000000
      sample.status = 'ENABLE'

      sample.id = 'id_' + (Math.random() + '').replace('.', '')

      this.formValue.versions.push(sample)
      this.activeName = this.getTabId(this.formValue.versions[this.formValue.versions.length -1])

    },

    getTabTitle(item){
      return this.$dateFormatDate(item.versionStartTime) + ' 至 '+ this.$dateFormatDate(item.versionEndTime)
    },

    getTabId(item){
      return 'tab_' + item.id
    },

    submitForm() {

      let _this = this

      if (this.formValue.versions && this.formValue.versions.length > 0) {
        let versions = _this.$refs['insurancePriceCfg'].map(e => e.getFormData())
        this.formValue.versions = versions

      }

      if (_.isEmpty( this.formValue.versions)){
        this.$message({
          showClose: true,
          message: '请添加价卡版本',
          type: 'warning'
        })
        return
      }

      let submitData = this.formValue


      _this.$ajax({
        url: '/fms-api/product/PmsInsuranceCustomerPriceRpc/saveUpdate.json',
        type: 'json',
        data: submitData,
        success: (responseData) => {

          this.$message({
            showClose: true,
            message:  this.$tt('tip_submit_success'),  //'提交成功',
            type: 'success'
          })
          this.$tag.tagClose()

        },
        afterAjax() {
        }
      });

    },
    goback() {
      this.$tag.tagClose()
    }
  }

}
</script>



<style>

</style>
